<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 -->
  <script src="/lib/vue.js"></script>

</head>

<body>
  <div id="bo">
    <!-- 变大写，js里面的方法 -->
    <h1>{{content.toUpperCase()}}</h1>
    <!-- 求出长度 -->
    <h1>{{content.length}}</h1>

    <h1>sml</h1>
    <h2>{{ss}}
    </h2>
    <p>1</p>
    <p>{{ss}}</p>
    <p>{{count}}</p>
    <p>{{count+1}}</p>
  </div>
</body>
<!-- 书写vue代码 -->
<script>
  new Vue({
    el: "#bo",//el:element元素的意思，代表vue实例的作用范围,不能作用域在html标签上
    data: {//data代表数据，自定义各种数据
      ss: '大美女',//{{插值表达式}}
      count: 0,
      content: 'woyaoshoudao120'//必须要有引号包裹
      // 
    }
  }); //创建一个vue实例
  // 一个页面只能使用一个vue实例，不能创建多个 
  // 
</script>

</html>